<script setup lang="ts">
import { ref } from "vue";

defineOptions({
  options: {
    styleIsolation: "shared",
  },
});

const form = ref<any>(null);
const formData = ref({
  mobile: "13230000073",
  password: "abc12345",
});

const rules = {
  mobile: {
    rules: [
      {
        required: true,
        errorMessage: "请输入手机号",
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        errorMessage: "手机号格式不正确",
      },
    ],
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: "请输入密码",
      },
      {
        minLength: 6,
        maxLength: 20,
        errorMessage: "密码长度在6-20个字符之间",
      },
    ],
  },
};

const isAgree = ref(false);

const handleLogin = async () => {
  // 表单验证
  try {
    await form.value?.validate();

    if (!isAgree.value) {
      uni.showToast({
        title: "请先同意用户协议和隐私协议",
        icon: "none",
      });
      return;
    }

    // TODO: 这里添加实际的登录API调用
    // const res = await login(formData.value)

    // 登录成功后跳转到首页
    uni.switchTab({
      url: "/pages/index/index",
    });
  } catch (e) {
    console.log("表单验证失败", e);
  }
};
</script>

<template>
    <uni-forms class="login-form" ref="form" :model="formData" :rules="rules">
    <uni-forms-item name="mobile">
      <uni-easyinput
        v-model="formData.mobile"
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput
        v-model="formData.password"
        type="password"
        placeholder="请输入密码"
        :input-border="false"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <view class="agreement">
      <radio :checked="isAgree" @click="isAgree = !isAgree" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="handleLogin">登 录</button>
    <navigator hover-class="none" class="uni-navigator" url=" ">
      忘记密码？
    </navigator>
  </uni-forms>
</template>

<style lang="scss">
  @import './styles.scss';
</style>
